<script lang="ts" setup>
import { ref } from 'vue'

// ref包装后，会返回一个ref对象，初始化的数据被保存在ref对象的value属性中
const totalCount = ref(100)
console.log(totalCount);

// 修改.value属性更新视图
const addCount = () => {
  totalCount.value++
}
const subCount = () => {
  totalCount.value--
}
</script>

<template>
  <button @click="subCount">-</button>
  <!-- ref 数据可以被直接渲染 -->
  <span>{{ totalCount }}</span>
  <button @click="addCount">+</button>
</template>

<style scoped></style>
